<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <template v-slot:header>
            <div class="clearfix">
              <span>个人信息</span>
            </div>
          </template>
          <div>
            <div class="text-center">
              <userAvatar />
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                姓名
                <div class="pull-right">{{ state.user.nickName }}</div>
              </li>
              <li class="list-group-item">
                手机号码
                <div class="pull-right">{{ state.user.phonenumber }}</div>
              </li>
              <li class="list-group-item">
                性别
                <div class="pull-right">{{ state.user.sex == 0 ? '男' : '女'}}</div>
              </li>
              <li class="list-group-item">
                所属角色
                <div class="pull-right">{{ state.roleGroup }}</div>
              </li>
<!--              <div v-if="state.user.teacher">-->
<!--                <li class="list-group-item">-->
<!--                  工号-->
<!--                  <div class="pull-right">{{ state.user.teacher.teacherNum }}</div>-->
<!--                </li>-->
<!--                <li class="list-group-item">-->
<!--                  学位-->
<!--                  <div class="pull-right">{{ state.user.teacher.degree }}</div>-->
<!--                </li>-->
<!--                <li class="list-group-item">-->
<!--                  学历-->
<!--                  <div class="pull-right">{{ state.user.teacher.education }}</div>-->
<!--                </li>-->
<!--                <li class="list-group-item">-->
<!--                  院系-->
<!--                  <div class="pull-right">{{ state.user.teacher.faculties }}</div>-->
<!--                </li>-->
<!--                <li class="list-group-item">-->
<!--                  职称-->
<!--                  <div class="pull-right">{{ state.user.teacher.title }}</div>-->
<!--                </li>-->
<!--                <li class="list-group-item">-->
<!--                  出生日期-->
<!--                  <div class="pull-right">{{ state.user.teacher.birth }}</div>-->
<!--                </li>-->
<!--              </div>-->
              <div v-if="state.user.student">
                <li class="list-group-item">
                  学号
                  <div class="pull-right">{{ state.user.student.stuNum }}</div>
                </li>
                <li class="list-group-item">
                  专业
                  <div class="pull-right">{{ state.user.student.major }}</div>
                </li>
                <li class="list-group-item">
                  班级
                  <div class="pull-right">{{ getClassName(state.user.student.classId)}}</div>
                </li>
                <li class="list-group-item">
                  学院
                  <div class="pull-right">{{ getCollegeName(state.user.student.collegeId)}}</div>
                </li>
                <li class="list-group-item">
                  系
                  <div class="pull-right">{{ getFacultiesName(state.user.student.facultiesId)}}</div>
                </li>
                <li class="list-group-item">
                  年级
                  <div class="pull-right">{{ state.user.student.stuGradYear }}级</div>
                </li>
                <li class="list-group-item">
                  手机号
                  <div class="pull-right">{{ state.user.student.stuPhone }}</div>
                </li>
                <li class="list-group-item">
                  民族
                  <div class="pull-right">{{ state.user.student.nation }}</div>
                </li>
                <li class="list-group-item" style="padding-bottom: 30px">
                  政治面貌
                  <div class="pull-right">{{ state.user.student.partyMember == 2 ? '党员' : '群众' }} <el-button style="margin-left: 20px;" type="primary" v-if="state.user.student.partyMember != 2" @click="goApplay">党员申请</el-button></div>
                </li>
                <li class="list-group-item">
                  大队
                  <div class="pull-right">{{ state.user.student.bigTeam }}</div>
                </li>
                <li class="list-group-item">
                  区队
                  <div class="pull-right">{{ state.user.student.smallTeam }}</div>
                </li>
                <li class="list-group-item">
                  户籍地
                  <div class="pull-right">{{ state.user.student.stuPlace }}</div>
                </li>
                <li class="list-group-item">
                  城市
                  <div class="pull-right">{{ state.user.student.stuCity }}</div>
                </li>
                <li class="list-group-item">
                  创建日期
                  <div class="pull-right">{{ state.user.createTime }}</div>
                </li>
<!--                <li class="list-group-item">-->
<!--                  <span>操作</span>-->
<!--                  <div class="pull-right">-->
<!--                    <el-link type="primary" @click="handleExport">导出简历</el-link>-->
<!--                  </div>-->
<!--                </li>-->
              </div>

            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <template v-slot:header>
            <div class="clearfix">
              <span>基本资料</span>
            </div>
          </template>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo" v-if="state.user.student">
              <student-info :user="state.formUser" @changeInfo="getUser"/>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Profile">
import userAvatar from "./userAvatar";
import resetPwd from "./resetPwd";
import { getUserProfile } from "@/api/system/user";
import StudentInfo from "@/views/baseData/user/profile/studentInfo.vue";
import {useRouter} from "vue-router";
import {getAllClassListApi, getAllFacultiesApi, getCollegeAllListApi} from "@/api/school.js";
const {proxy} = getCurrentInstance();

const router = useRouter()
const activeTab = ref("resetPwd");
const state = reactive({
  user: {},
  roleGroup: {},
  postGroup: {},
  formUser:{},
  collegeList: [],
  classList: [],
  facultiesList: [],
});

const getCollegeName = (id) => {
  const one = state.collegeList.find(item => item.id === id)
  if(one){
    return one.collegeName
  }
  return ""
}
const getFacultiesName = (id) => {
  const one = state.facultiesList.find(item => item.id === id)
  if(one){
    return one.facultiesName
  }
  return ""
}

const getClassName = (id) => {
  const one = state.classList.find(item => item.id === id)
  if(one){
    return one.className
  }
  return ""
}

const getCollegeList = async () => {
  const res = await getCollegeAllListApi()
  if (res.code == 200) {
    state.collegeList = res.data
  }
}

const getAllFaculties = async () => {
  const res = await getAllFacultiesApi()
  if (res.code == 200) {
    state.facultiesList = res.data
  }
}

const getCLassListAll = async () => {
  const res = await getAllClassListApi()
  if (res.code == 200) {
    state.classList = res.data
  }
}
onMounted(() => {
  getCollegeList()
  getAllFaculties()
  getCLassListAll()
})

async function getUser() {
  const response = await getUserProfile()
  state.user = response.data;
  state.roleGroup = response.roleGroup;
  state.postGroup = response.postGroup;
  state.formUser = response.data.student;
  state.formUser.sex = response.data.sex
  console.log( state.formUser.sex," state.formUser.sex")
  console.log(response.data.student,"response.data")
};



const goApplay = () => {
  router.push("/approvalManagement/mineApproval/add");
};

const handleExport = () => {
  proxy.download("/school/student/exportResume2",{},`简历.docx`);
}

onMounted(() => {
  getUser();
});

</script>

<style lang="scss" scoped>
.pull-right{
  display: flex;
  align-items: center;
  a{
    margin-left: 10px;
  }
}
</style>
